@remote-ui/types

What is @remote-ui/types?

@remote-ui/types is a TypeScript library that provides type definitions and utilities for building remote UI components. It is designed to facilitate the creation of UI components that can be rendered in a different environment from where they are defined, such as in a web worker or an iframe.

What are @remote-ui/types's main functionalities?

Component Type Definitions

Defines a remote UI component type with specific properties. This example shows how to define a Button component with label and onClick properties.

import {RemoteComponentType} from '@remote-ui/types';

interface ButtonProps {
  label: string;
  onClick: () => void;
}

const Button: RemoteComponentType<'Button', ButtonProps> = {
  kind: 'Button',
  props: {
    label: 'Click me',
    onClick: () => alert('Button clicked!'),
  },
};

Remote Component Creation

Creates a remote UI component instance. This example demonstrates how to create a Button component instance with specific properties.

import {createRemoteComponent} from '@remote-ui/types';

const Button = createRemoteComponent<'Button', {label: string; onClick: () => void}>('Button');

const buttonInstance = Button({label: 'Click me', onClick: () => alert('Button clicked!')});

Remote Component Rendering

Renders a remote UI component instance to a target environment. This example shows how to render a Button component instance to a DOM element.

import {render} from '@remote-ui/types';

const buttonInstance = Button({label: 'Click me', onClick: () => alert('Button clicked!')});

render(buttonInstance, document.getElementById('app'));

Other packages similar to @remote-ui/types

react

React is a popular JavaScript library for building user interfaces. It allows developers to create reusable UI components that can manage their own state. Unlike @remote-ui/types, React is not specifically designed for remote UI components but can be used in a similar manner with additional libraries.

vue

Vue.js is a progressive JavaScript framework for building user interfaces. It provides a reactive data binding system and a component-based architecture. While Vue.js is not specifically designed for remote UI components, it can be used to achieve similar functionality with the help of additional tools.

lit

Lit is a simple library for building fast, lightweight web components. It provides a declarative way to define custom elements and manage their state. Lit is similar to @remote-ui/types in that it focuses on component-based development, but it is not specifically designed for remote UI components.

README

@remote-ui/types

This library provides a couple of utility types used in other remote-ui libraries. All of these types are re-exported from @remote-ui/core.

Types

RemoteComponentType<Type, Props, AllowedChildren>

A “type” in remote-ui is represented with a humble string. You pass a string to RemoteRoot#createComponent](../core#remoterootcreatecomponent) in order to create a new component instance, and a string identifier for the component is the only required argument. However, many of the remote-ui libraries have support for a more strongly-typed version of that string, which is the purpose of RemoteComponentType. This type is still “just a string”, but includes additional type parameters for the type of the properties allowed for that component, and for the types of components this component accepts as children. The [RemoteComponent` APIs, as well as a number of others, use these types to offer you editor autocompletion on property names, and other helpful type checking.

The AllowedChildren argument does not perform any runtime validation, it only provides compile-time checking to ensure value children are appended to a component. If your component accepts any child, including being able to accept text nodes as children, you can pass true for this type parameter (or leave it unset, as the default is true).

IdentifierForRemoteComponent<Type>

If the Type parameter is a RemoteComponentType, this will extract the exact string type that is that component’s unique name.

type Button = RemoteComponent<'Button', {onPress(): void}>;
type ButtonType = IdentifierForRemoteComponent<Button>; // 'Button'

PropsForRemoteComponent<Type>

If the Type parameter is a RemoteComponentType, this will extract the props type for that component

type Button = RemoteComponent<'Button', {onPress(): void}>;
type ButtonType = PropsForRemoteComponent<Button>; // {onPress(): void}